<html>

<head>
    <title>分享贴士-微信工具-金涞科技</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="图片生成,分享贴士,微信工具,金涞科技" />
    <meta name="description" content="通过模板生成图片，用于在朋友圈分享" />

    <link type="text/css" rel="stylesheet" href="bower_components/weui/dist/style/weui.min.css" />
    <link type="text/css" rel="stylesheet" href="css/site.css" />
    <link type="text/css" rel="stylesheet" href="css/themes/default.css" id="theme-css" />
</head>

<body>
    <div class="container" id="container">
        <div class="page home js_show" id="container-body">
            <div class="page__hd">
                <h1 class="page__title">
                    微信分享图片合成器
                </h1>
                <p class="page__desc">输入文字，生成图片</p>
            </div>
            <div class="page__bd page__bd_spacing">
                <div class="weui-cells__title">地址
                    <i v-on:click="address=''" class="weui-icon-cancel"></i>
                </div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" v-model="address" placeholder="请输入地址">
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">系列
                    <i v-on:click="serial=''" class="weui-icon-cancel"></i>
                </div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" v-model="serial" placeholder="请输入系列">
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">标题
                    <i v-on:click="title1=''" class="weui-icon-cancel"></i>
                </div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" v-model="title1" placeholder="请输入标题">
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">副标题
                    <i v-on:click="title2=''" class="weui-icon-cancel"></i>
                </div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" v-model="title2" placeholder="请输入标题">
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">内容
                    <i v-on:click="content=''" class="weui-icon-cancel"></i>
                </div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <textarea class="weui-textarea" placeholder="请输入内容" rows="10" aria-multiline="true" v-model="content"></textarea>
                            <div class="weui-textarea-counter">
                                <span>{{content.length}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">标语
                    <i v-on:click="slogon=''" class="weui-icon-cancel"></i>
                </div>
                <div class="weui-cells">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" v-model="slogon" placeholder="请输入标语">
                        </div>
                    </div>
                </div>
                <div class="weui-cells__title">预览</div>
                <div class="tpl" id="tpl-container">
                    <div class="text-center">
                        <fieldset class="tip">
                            <legend>每天一分钟</legend>
                            读懂法律小知识
                        </fieldset>
                    </div>
                    <p class="serial">{{serial}}</p>
                    <br>
                    <div class="text-center">
                        <h3 class="title1">{{title1}}</h3>
                    </div>
                    <h5 class="title2">{{title2}}</h5>
                    <br>

                    <article class="article">
                        <p>
                            <strong class="beginning">律师解答：</strong>
                        </p>
                        <p class="content">{{content}}</p>
                    </article>
                    <br>
                    <div class="text-center">
                        <img src="images/qr.jpg" class="qr" />
                    </div>
                    <p class="slogon">{{slogon}}</p>
                    <hr>
                    <p class="address">{{address}}
                        <span class="tel">电话：{{tel}}</span>
                    </p>
                    <hr>
                </div>

                <br>
                <button type="button" class="weui-btn weui-btn_primary" v-on:click="create">生成图片</button>
                <div class="weui-cells__title" v-show="result">生成结果(长按下图可以分享)</div>
                <div id="result" v-show="result"></div>
                <br>
                <div class="weui-footer">
                    <p class="weui-footer__text">Copyright © 2018 金涞科技</p>
                </div>
            </div>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript" src="bower_components/dom-to-image/dist/dom-to-image.min.js"></script>
    <script type="text/javascript">    

        var app = new Vue({
            el: '#container',
            data: {
                serial: '公司股权法系列',
                title1: '离婚财产分割协议签订时就生效吗？',
                title2: '',
                content: '法律解释，是指对法律和法规条文的含义所作的说明。依据解释是否具有法律效力分为正式解释和非正式解释；依据解释所具有的法律效力范围分为规范性解释和个别性解释；依据解释的方法分为文法解释、逻辑解释、系统解释、历史解释；依据解释的尺度分为字面解释、限制解释、扩充解释。法律解释对于实现法律对社会关系的调整起着极重要的作用，尤其在法律适用过程中，是一个必不可少的环节。',
                address: '',
                tel: '18161230581',
                slogon: '启法明善 诚信为盟',
                result: false
            },
            methods: {
                create: function (event) {
                    app.result = true;
                    setTimeout(function () {
                        var result = document.getElementById('result');
                        result.innerHTML = '';
                        domtoimage.toSvg(document.getElementById('tpl-container'))
                            .then(function (dataUrl) {
                                var img = new Image();
                                img.src = dataUrl;
                                result.appendChild(img);
                                setTimeout(function () {
                                    var body = document.getElementById('container-body');
                                    body.scrollTop = body.scrollTop + 300;
                                }, 100);
                            })
                            .catch(function (error) {
                                app.result = false;
                                alert('生成失败');
                            });
                    });
                }
            }
        });

    </script>
</body>

</html>